<template>
  <div id="letters-scroll"
    class="hidden md:block"
    :class="{'fade-out-right': !show,'fade-in-right': show}">
    <ul class="space-y-3 text-center">
      <li>
        <span class="text-gray-1500 hover:text-purple-1300 cursor-pointer py-2"
          @click="toTop()">
          <svg-icon className="text-xl mx-auto"
            iconName='home'></svg-icon>
        </span>
      </li>
      <li v-for="(item, key) in list">
        <span class="text-sm leading-normal text-gray-1500 hover:text-purple-1300 cursor-pointer py-1.5 px-2"
          :class="{'text-purple-1300 font-semibold bg-purple-1300 bg-opacity-10 hover:opacity-90 rounded': activeName === getDom(item, key)}"
          @click="toAnchor(`#${getDom(item, key)}`)">
          {{item.isYear ? item.name : $t(`${item.name}`).toUpperCase()}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'LettersScroll',
  props: {
    dateList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    dateList: {
      handler() {
        this.list = [{ name: 'index_now' }, ...this.dateList]
      },
      immediate: true,
      deep: true,
    },
    $route: {
      handler() {
        this.$nextTick(() => {
          if (
            (this.$route.name === 'index' ||
              this.$route.name === 'lang-index') &&
            this.$route.fullPath.indexOf('#now') >= 0 &&
            process.browser
          ) {
            this.toAnchor('#index_now-0')
          }
        })
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      activeName: null,
      isScrolling: false,
      timer: null,
      scrollTop: 0,
      show: false,
      list: [],
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onSroll)
  },
  methods: {
    toTop() {
      this.isScrolling = true
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      })
      this.$nextTick(() => {
        this.isScrolling = false
      })
    },
    toAnchor(val) {
      const dom = document.querySelector(val)
      if (dom) {
        this.isScrolling = true
        const top = dom.offsetTop

        const targetScrollPosition = Math.max(top - 100, 0)

        window.scrollTo({
          top: targetScrollPosition,
          behavior: 'smooth',
        })
        this.$nextTick(() => {
          this.isScrolling = false
        })
      }
    },
    //滚动页面跟踪导航高亮
    onSroll() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(this.isScrollEnd, 300)
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop

      let justLaunchedTop = document.getElementById(`index_now-0`).offsetTop
      if (justLaunchedTop && this.scrollTop > justLaunchedTop - 100) {
        this.show = true
      } else {
        this.show = false
        return false
      }

      if (this.isScrolling) {
        return false
      }

      let currentDom = ''

      this.list.forEach((item, key) => {
        let dom = this.getDom(item, key)
        if (document.getElementById(dom)) {
          let itemTop = document.getElementById(dom).offsetTop
          if (this.scrollTop >= itemTop - 110) {
            currentDom = dom
          }
        }
      })

      this.activeName = currentDom
    },
    //判断滚动条是否滚动结束
    isScrollEnd() {
      let scrollTopNew =
        document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop === scrollTopNew) {
        this.isScrolling = false
      }
    },
    getDom(item, key) {
      return item.is_year ? `year-${item.name}-${key}` : `${item.name}-${key}`
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
    window.removeEventListener('scroll', this.onSroll)
  },
}
</script>
<style lang='scss' scoped>
#letters-scroll {
  position: fixed;
  top: 50%;
  /* max-height: 100%;
  overflow-y: auto; */
  right: 10px;
  text-align: center;
  z-index: 10;
  transition: transform 0.4s ease-in-out;

  &.fade-out-right {
    transform: translate3d(180px, -50%, 0);
    transition-timing-function: ease-in;
  }
  &.fade-in-right {
    transform: translate3d(0px, -50%, 0);
    transition-timing-function: ease-out;
  }
  ul {
    transition: all 0.2s;
    li {
      svg {
        fill: #2d2d2d;
      }
      &:hover {
        svg {
          fill: #7150e6;
        }
      }
    }
  }
}
</style>